<template>
	<view style="padding: 32rpx; height: 100vh; background-color: #f1f1f1;">
		<view style="padding: 40rpx 0 80rpx 0; text-align: center; font-size: 64rpx;">uniapp开发框架</view>
		<view style="background-color: #fff;">
			<uni-segmented-control
				:current="active"
				:values="['账号登录', '手机授权登录']"
				@clickItem="onChange"
				styleType="text"
				activeColor="#4cd964"
			></uni-segmented-control>
			
			<view v-show="active === 0"  style="padding: 32rpx 16px;">
				<uni-forms :modelValue="formData">
					<uni-forms-item required label="用户名" name="username">
						<uni-easyinput type="text" v-model="formData.username" placeholder="请输入用户名" />
					</uni-forms-item>
					<uni-forms-item required label="密码" name="password">
						<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
					</uni-forms-item>
					<uni-forms-item required name="code" label="验证码">
						<view style="display: flex;">
							<uni-easyinput type="text" v-model="formData.code" placeholder="请输入验证码" />
							<image :src="captchaImgBase64" style="width: 240rpx; height: 60rpx;"/>
						</view>
					</uni-forms-item>
				</uni-forms>
				<view style="padding: 16rpx 0 0 0;">
				  <button
					type="primary"
					@tap="doLogin"
				  >登录</button>
				</view>
			</view>
			<view v-show="active === 1">
				<view style="padding: 80rpx 32rpx;">
				  <button
					type="primary"
					open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber"
				  >一键登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { callApi } from '../../common/api'
	import { encodePwd } from '../../common/utils/pwd'
	import { warn } from '../../common/utils/feedback'
	import { APP_ID } from '../../common/config/index'
	import { USER_INFO } from '../../common/constant/cacheKeys'
	import { setCache } from '../../common/utils/cache'
	export default {
		data() {
			return {
				active: 0,
				formData: {
					username: '',
					password: '',
					code: '',
				},
				sid: '',
				captchaImgBase64: ''
			}
		},
		onLoad() {
			this.refreshCaptcha()
		},
		methods: {
			onChange (e) {
			    if (this.active != e.currentIndex) {
			        this.active = e.currentIndex;
			    }
			},
			async refreshCaptcha () {
			    const { captchaImgBase64, sid } = await callApi('getCaptcha')
			    this.captchaImgBase64 = captchaImgBase64
				this.sid = sid
			},
			  async doLogin () {
			    const params = {
			      "code": this.formData.code,
			      "password": encodePwd(this.formData.password),
			      "sid": this.sid,
			      "username": this.formData.username,
			      "version": "v2"
			    }
			
			    // 需补充参数校验逻辑，避免直接穿透到服务端
			
			    const res = await callApi('sysLogin', params)
			    if (!res.waitHandle) {
			      setCache(USER_INFO, res)
			      this.loginSuccess()
			    } else {
			      warn(res.message)
			      this.refreshCaptcha()
			    }
			  },
			  loginSuccess () {
			    uni.switchTab({ url: '/pages/index/index' })
			  },
			  async getPhoneNumber (e) {
			    const res = await callApi('phoneNumberLogin', { code: e.detail.code, appid: APP_ID })
			    setCache(USER_INFO, res)
			    this.loginSuccess()
			  }
		}
	}
</script>

<style></style>
